@extends('layouts.mobile')

@section('title', '粗耕农产品信息平台 - 求购')
@section('styles')
    <link href="{{asset('mui/css/mui.min.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('css/previewimage.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('layui/css/layui.css')}}" rel="stylesheet" type="text/css">
    <style type="text/css">
        .mui-table-view {
            padding: 20px 0px;
            margin-bottom: 36px;
        }

        .mui-table-view > .mui-table-view-cell > .mui-input-row > label {
            padding: 13px 0px;
            width: 20%;
        }

        .mui-table-view > .mui-table-view-cell {
            padding: 0px 15px;
        }

        .mui-table-view > .mui-table-view-cell > .mui-input-row > input {
            width: 75%;
            border-bottom: 1px solid #ccc;
        }

        .mui-table-view > .mui-table-view-cell > .mui-input-row > textarea {
            width: 75%;
            border: 1px solid #ccc;
            padding: 4px;
        }

        .mui-btn {
            position: fixed;
            bottom: 0px;
            width: 100%;
        }

        .image_list {
            width: 80%;
            float: right;
        }

        .image_list > img {
            margin: 5px 5px;
            width: 64px;
            height: 64px;
        }

        input[type=file] {
            display: none;
        }
        .mui-btn, button, input[type=button], input[type=reset], input[type=submit]{
            border-bottom-left-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
        }
        .mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item){
            line-height: 30px !important;
        }
        .mui-preview-header{
            z-index: -999;
        }
    </style>
@stop
@section('content')
    <form class="layui-form layui-form-pane" action="">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>求购产品</label>
                    <input type="text" name="title" lay-verify="required" class="mui-input-clear" placeholder="请输入您要求购的产品名称/标题">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>意向地区</label>
                    <input type="text" name="area" lay-verify="required" class="mui-input-clear" placeholder="省、市、区、县、乡镇">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>求购产量</label>
                    <input type="text" name="production" lay-verify="required" class="mui-input-clear" placeholder="例如：10">
                </div>
            </li>

            <input type="hidden" name="has_pin" class="mui-input-clear" placeholder="当前已销售的产量">

            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>求购预算</label>
                    <input type="text" name="unit_price" lay-verify="required" class="mui-input-clear" placeholder="例如：20万">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>产品单位</label>
                    <input type="text" name="unit" lay-verify="required" class="mui-input-clear" placeholder="例如：吨、斤、件......">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>联系电话</label>
                    <input type="text" name="contact_phone" lay-verify="required" class="mui-input-clear" placeholder="请输入您的联系电话">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>联系人</label>
                    <input type="text" name="contact_people" lay-verify="required" class="mui-input-clear" placeholder="请输入您的称呼">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>其他备注</label>
                    <textarea name="product_desc" lay-verify="required" rows="5" placeholder="请输入其他备注信息、方便他人与您取得联系"></textarea>
                </div>
            </li>
            <input type="hidden" v-model="product_images" name="product_images">
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label style="padding: 10px 0px 0px 0px">参考图片</label>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label></label>
                    <div class="image_list">
                        <img :data-preview-src="item" v-for="item in images" :src="item" data-preview-group="1">
                        <button type="button" class="layui-btn" id="hidden-file" style="background-color: rgba(255,255,255,1);height: 64px;padding: 0px;">
                            <img src="/images/common/created_image.png">
                        </button>
                    </div>
                </div>
            </li>
        </ul>
        <button style="border: none;height: 45px;line-height: 45px;" type="button" lay-submit="" lay-filter="subForm" class="mui-btn mui-btn-danger">立即发布</button>
    </form>
    <script src="{{asset('layui/layui.js')}}" type="text/javascript"></script>
    <script src="{{asset('mui/js/mui.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('mui/js/mui.previewimage.js')}}" type="text/javascript"></script>
    <script src="{{asset('mui/js/mui.zoom.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        layui.use(['element', 'jquery', 'layer', 'form', 'upload'], function () {
            var element = layui.element,
                $ = layui.jquery,
                layer = layui.layer,
                form = layui.form,
                upload = layui.upload;
            mui.previewImage();
            setInterval(function () {
                if ($(".mui-preview-image").css("display") == 'block' ){
                    if (!$(".mui-slider-group .mui-slider-item a").length){
                        $(".mui-slider-group .mui-slider-item .mui-zoom-scroller").after("<a href='' style='position: absolute;top: 12px;color: #FF5722;right: 20px;height: 30px;' class='deletedImg'>删除</a>");
                    }
                }
            },1000)
//            $(".mui-slider-group .mui-slider-item").after("<a href=''>删除</a>");
            var vm = new Vue({
                el: '#app',
                data: {
                    images: [],
                    product_images:""
                },
                mounted: function () {

                },
                methods: {
                }
            });
            upload.render({
                elem: '#hidden-file'
                , url: "{{url('mobile/news/uploads')}}"
                ,multiple: true
                , done: function (res) {
                    let image = vm.images
                    image.push(res.fileName)
                    vm.images = image
                    vm.product_images = vm.images.join(";")
                }
            });
            mui.init({
                gestureConfig:{
                    longtap: true, //默认为false
                    release:true,
                    doubletap: true
                }
            });
            mui(".image_list").on('doubletap', "img", function() {
                alert(1)
                return false;
            });
            $(document).on("click",".deletedImg",function () {
                let images = $("input[name='product_images']").val();
                let thisImg = $(this).siblings(".mui-zoom-scroller").find("img").attr("src");
                console.log(thisImg)
                images = images.split(";");
                let newImg = [];
                let index = 0;
                for (var i=0;i<images.length;i++){
                    if (images[i] != thisImg){
                        newImg[index] = images[i];
                        index++;
                    }
                }
                vm.images = newImg
                vm.product_images = vm.images.join(";")
            })
            //监听提交
            form.on('submit(subForm)', function(data){
                $.ajax({
                    type: "POST",
                    url: "{{url('mobile/news/looking')}}",
                    dataType: "json",
                    data: data.field,
                    success: function (res) {
                        if (res.code && res.code == 200){
                            layer.msg(res.msg,function () {
                                window.history.go(-1);
                            })
                        }else{
                            layer.msg(res.msg)
                        }
                    }
                })
                return false;
            });
            $("#upFile").click(function () {
                $("#hidden-file").click();
            })
        });
    </script>
@stop